<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/style.css">
    
</head>
<body>
    
    <h1 class="head">Welcome to Logic Workshops</h1>
    <div id="NPC"></div>
    <div id="player">
        <h1>在线玩家：<span>NULL</span></h1>
    </div>
    <div class="CPU-bar"></div>
    <div class="memory-bar"></div>
    <div class="network-bar"></div>
    <div class="game-bar">
        <button onclick="btn()">登录此网站</button>
    </div>
    <script>
        const NPC = document.getElementById("NPC");
        const newH = document.createElement("h1"); 
        const random = Math.floor(Math.random() * 32000) + 1; 
        newH.innerHTML = `该服务器存在NPC数量为：${random}`;
        NPC.appendChild(newH); 
        NPC.style.textAlign = "center";

        const CPUBar = document.querySelector('.CPU-bar');
        const newH1 = document.createElement("h1");
        const random1 = Math.floor(Math.random() * 100) + 1;
        newH1.innerHTML = `CPU占用：${random1}%`;
        CPUBar.appendChild(newH1);
        CPUBar.style.textAlign = "center";

        const memoryBar = document.querySelector('.memory-bar');
        const newH2 = document.createElement("h1");
        const random2 = Math.floor(Math.random() * 16000) + 1;
        newH2.innerHTML = `内存占用：${random2}MB`;
        memoryBar.appendChild(newH2);
        memoryBar.style.textAlign = "center";

        const networkBar = document.querySelector('.network-bar');
        const newH3 = document.createElement("h1");
        const random3 = Math.floor(Math.random() * 99) + 1;
        newH3.innerHTML = `网速：${random3}Mib/S`;
        networkBar.appendChild(newH3);
        networkBar.style.textAlign = "center";

        function btn() {
            alert("登录系统被破坏，正在修复中")
        }
    </script>
</body>
</html>